<template>
  <div class="customer-service">
    <nav-header
      :headerTitle="'客服中心'"
      :navBgColor="'#fff'"
      :isNext="false"
      :isNavBack="true"
      :isNedMsg="false"
    ></nav-header>
    <div class="content">
      <div class="banner">
        <ul class="banner-list">
            <!-- @click="go2url('http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/b1.%E5%A6%82%E4%BD%95%E8%B5%9A%E9%92%B1.html')" -->
            <!-- @click="go2url('http://liketuitest.baoxiandashi.cn/html/b1.html')" -->
          <li
            class="banner-item"
            @click="go2url('http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/b1.%E5%A6%82%E4%BD%95%E8%B5%9A%E9%92%B1.html')"
            style="backgroundColor: #FF2525"
          >
            <img class="item-pic" src="@/assets/images/customerService/kf_shop.png" />
            <span class="item-text">如何赚钱</span>
          </li>
          <li
            class="banner-item"
            @click="go2url('http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/b3.%E6%96%B0%E6%89%8B%E6%95%99%E7%A8%8B.html')"
            style="backgroundColor: #18ACFC"
          >
            <img class="item-pic" src="@/assets/images/customerService/kf_ad.png" />
            <span class="item-text">新手教程</span>
          </li>
          <li
            class="banner-item"
            @click="tap2url('/adMine/aboutInfluencer')"
            style="backgroundColor: #FFB328"
          >
            <img class="item-pic" src="@/assets/images/customerService/con_wechat.png" />
            <span class="item-text">关于流量主</span>
          </li>
          <li class="banner-item" @click="popup" style="backgroundColor: #30C774">
            <img class="item-pic" src="@/assets/images/customerService/kf_wechat.png" />
            <span class="item-text">微信客服</span>
          </li>
          <div class="clearfix"></div>
        </ul>
      </div>
      <div class="hot-issue">
        <p>热点问题</p>
        <ul class="issue-list">
          <li
            class="issue-item"
            v-for="(item, index) of issueList"
            :key="'issu' + index"
            @click="go2url(item.link)"
          >
            <span class="issue-item-text">{{item.text}}</span>
            <img src="@/assets/images/customerService/mine_enter_2.png" alt />
          </li>
        </ul>
      </div>
    </div>
    <ModalCopy :ModalCopy.sync="ModalCopy" @ModalCopyClick="copyClick"></ModalCopy>
  </div>
</template>

<script type="text/ecmascript-6">
import NavHeader from '@/components/NavHeader'
import ModalCopy from "@/components/ModalCopy";
import mixin from '@/utils/mixin.js'

const issueList = [
  {
    text: '1、如何查看广告投放数据？',
    link: 'http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/a1.%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B%E5%B9%BF%E5%91%8A%E6%8A%95%E6%94%BE%E6%95%B0%E6%8D%AE.html'
  },
  {
    text: '2、图文广告和文章广告的区别？',
    link: 'http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/a2.%E5%9B%BE%E6%96%87%E5%B9%BF%E5%91%8A%E5%92%8C%E6%96%87%E7%AB%A0%E5%B9%BF%E5%91%8A%E7%9A%84%E5%8C%BA%E5%88%AB.html'
  },
  {
    text: '3、朋友圈广告和微信群广告的区别？',
    link: 'http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/a3.%E6%9C%8B%E5%8F%8B%E5%9C%88%E5%B9%BF%E5%91%8A%E5%92%8C%E5%BE%AE%E4%BF%A1%E7%BE%A4%E5%B9%BF%E5%91%8A%E7%9A%84%E5%8C%BA%E5%88%AB.html'
  },
  {
    text: '4、如何将收益提现？',
    link: 'http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/a4%E5%A6%82%E4%BD%95%E5%B0%86%E6%94%B6%E7%9B%8A%E6%8F%90%E7%8E%B0.html'
  },
  {
    text: '5、充值的广告费可以退吗？',
    link: 'http://ossfile.wechatrenmai.cn/appMetaConfig/normal/customerServiceCenter/v1/a5.%E5%85%85%E5%80%BC%E7%9A%84%E5%B9%BF%E5%91%8A%E8%B4%B9%E5%8F%AF%E4%BB%A5%E9%80%80%E5%90%97.html'
  }
]
export default {
  name: 'customerService',
  mixins: [mixin],
  data () {
    return {
      issueList,
      ModalCopy: {},
    }
  },
  mounted () {
    this.$setgoindex();
    this.getWxAdmin();
  },
  methods: {
    // 获取管理员微信号
    getWxAdmin () {
      let adminWxNum = window.sessionStorage.getItem("adminWxNumForAD")
      if(!(this.isNull(adminWxNum) ) ){
        this.ModalCopy = {
          isModal: false,
          title: `您好：微信客服微信号：${adminWxNum} 请复制微信号去微信添加好友咨询吧~`,
          name: '',
          copy: adminWxNum,
          rightBtn: '复制微信'
        }
      }else{
        this.$http.post('/soft/getAppConfig', {}).then(
          res => {
            adminWxNum = res.data.adminWxNum;
            this.ModalCopy = {
              isModal: false,
              title: `您好：微信客服微信号：${adminWxNum} 请复制微信号去微信添加好友咨询吧~`,
              name: '',
              copy: adminWxNum,
              rightBtn: '复制微信'
            };
            window.sessionStorage.setItem("adminWxNumForAD" , adminWxNum) ;
          },
          err => { console.log(err) }
        )
      }
      
    },
    tap2url (url) {
      this.$router.push(url)
    },
    go2url (url) {
      window.location.href = url
    },
    popup () {
      this.ModalCopy.isModal = true
    },
    copyClick () {
      this.copy('.btn')
    }
  },
  components: {
    NavHeader,
    ModalCopy
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/common.scss';
.customer-service {
  & /deep/ .divOne {
    padding: 0 40px;
    box-sizing: border-box;
  }
  .content {
    width: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
    margin-top: 88px;
    .banner {
      .banner-list {
        .banner-item {
          width: 328px;
          height: 150px;
          border-radius: 8px;
          @include center;
          float: left;
          margin-bottom: 30px;
          &:nth-child(2n) {
            margin-left: 30px;
          }
          img {
            width: 52px;
            height: 52px;
            display: block;
          }
          .item-text {
            font-size: 32px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 24px;
          }
        }
      }
    }
    .hot-issue {
      margin-top: 34px;
      p {
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 600;
        color: rgba(255, 37, 37, 1);
        box-sizing: border-box;
        padding-bottom: 30px;
        border-bottom: 1px solid #ededed;
      }
      .issue-list {
        .issue-item {
          padding: 0;
          box-sizing: border-box;
          padding: 40px 0;
          border-bottom: 1px solid #ededed;
          font-size: 32px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
          position: relative;
          span {
            font-size: 32px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 49, 51, 1);
          }
          img {
            width: 30px;
            float: right;
            display: block;
            position: relative;
            top: 5px;
            right: 0;
          }
        }
      }
    }
  }
}
</style>
